import React from 'react';
// 引入 useRef 钩子函数
// useRef :作用:
//01:给元素绑定ref 引用, 可以获取该元素dom 节点
//02: 给子组件绑定 ref 引用, 可以获取子组件上的数据和方法
import { useRef, useState, createRef } from 'react';
import Son from './Son';
const Myref = () => {
    const [username, setUsername] = useState('大s');
    // 创建一个ref 引用对象
    const ref1 = createRef();
    const ref2 = createRef();
    return (
        <div>
            使用useref 钩子函数
            {/* 受控组件的写法 */}
            <p>
                <input type='text' value={username} onChange={(e) => {
                    setUsername(e.target.value)
                }} />
            </p>
            {/* 非受控组件使用ref 操作dom */}
            <p>
                <input type='text' ref={ref1} defaultValue={username} />
                <button onClick={() => {
                    console.log('ref1', ref1.current.value)
                    console.log('ref2', ref2)
                    ref2.current.nameArr.push({
                        id: ref2.current.nameArr[ref2.current.nameArr.length - 1].id + 1,
                        name: ref1.current.value
                    })

                    ref2.current.setNameArr([...ref2.current.nameArr])

                }}>提交表单</button>
            </p>

            {/*引入子组件  */}
            <Son ref={ref2}></Son>
        </div>
    );
}

export default Myref;
